<template>
  <v-card class="mx-2">
    <v-card-title>报告列表</v-card-title>
    <v-card-actions>
      <v-btn color="primary" small @click.stop="dataTrigger = !dataTrigger"
        >查询</v-btn
      >
      <v-btn
        color="primary"
        small
        link
        :to="{
          name: 'FingerReportManualEditor',
        }"
        >新建报告</v-btn
      >
    </v-card-actions>
    <v-card-text>
      <v-row dense>
        <v-col cols="12" sm="3" md="2">
          <v-text-field
            v-model="query_args['report_info.user_info.username']"
            outlined
            dense
            label="报告人"
          ></v-text-field>
        </v-col>
        <v-col cols="12" sm="3" md="2">
          <v-text-field
            v-model="query_args['report_info.user_info.mobile']"
            outlined
            dense
            label="手机号"
          ></v-text-field>
        </v-col>
        <v-col cols="12" md="2" sm="3">
          <DatePicker
            v-model="query_args.create_time_after"
            label="创建时间大于"
            outlined
            dense
            withTime
          ></DatePicker>
        </v-col>
        <v-col cols="12" md="2" sm="3">
          <DatePicker
            v-model="query_args.create_time_before"
            label="创建时间小于"
            outlined
            dense
            withTime
          ></DatePicker>
        </v-col>
      </v-row>
    </v-card-text>
    <DataTableServer
      :headers="headers"
      :queryBackendFunc="queryFunc"
      :getDataTrigger="dataTrigger"
      dense
    >
      <template v-slot:item.create_time="{ item }">
        <span>
          {{ simpleDateFormat(item.create_time) }}
        </span>
      </template>
      <template v-slot:item.update_time="{ item }">
        <span>
          {{ simpleDateFormat(item.update_time) }}
        </span>
      </template>
      <template v-slot:item.action="{ item }">
        <span>
          <v-btn
            color="primary"
            small
            outlined
            class="mx-1"
            link
            :to="{
              name: 'FingerReportManualEditor',
              query: { report_id: item.id },
            }"
            >编辑</v-btn
          >
          <v-btn
            color="primary"
            :disabled="!item.id"
            small
            outlined
            class="mx-1"
            :loading="downloading" 
            @click.stop="genReport(item)"
            >生成报告书</v-btn
          >
          <v-btn
            color="red"
            small
            outlined
            class="mx-1"
            @click.stop="onDelete(item)"
            >删除</v-btn
          >
        </span>
      </template>
    </DataTableServer>
  </v-card>
</template>

<script>
  // 文章列表
  import DataTableServer from "@/components/DataTableServer"
  import { FingerReportManual } from "@/store/models/report_manual"
  import DateMixin from "@/mixin/DateMixin"
  import DatePicker from "@/components/datepicker/DatePicker"

  export default {
    name: "ReportList",
    components: {
      DataTableServer,
      DatePicker,
    },
    mixins: [DateMixin],

    data: () => ({
      dataTrigger: false,
      downloading: false,
      query_args: {
        "report_info.user_info.username": null,
        "report_info.user_info.mobile": null,
        create_time_after: null,
        create_time_before: null,
      },
      headers: [
        {
          text: "id",
          align: "left",
          sortable: true,
          value: "id",
        },
        {
          text: "报告类型",
          align: "left",
          sortable: true,
          value: "report_info.target",
        },
        {
          text: "报告人",
          align: "left",
          sortable: true,
          value: "report_info.user_info.username",
        },
        {
          text: "手机号",
          align: "left",
          sortable: true,
          value: "report_info.user_info.mobile",
        },
        {
          text: "创建时间",
          align: "left",
          sortable: true,
          value: "create_time",
        },
        {
          text: "更新时间",
          align: "left",
          sortable: true,
          value: "update_time",
        },
        {
          text: "操作",
          align: "left",
          sortable: true,
          value: "action",
        },
      ],
    }),

    methods: {
      async queryFunc(query_args, page, per_page) {
        Object.keys(this.query_args).forEach((key) => {
          const value = this.query_args[key]
          if (value) {
            query_args[key] = value
          }
        })
        if (!query_args.order_by && !query_args.order_by_desc) {
          // 没指定排序方式时，默认按照id倒序排
          query_args.order_by_desc = "id"
        }

        const results = await FingerReportManual.fetch(
          query_args,
          page,
          per_page
        )
        return results
      },

      async genReport(item){
        this.downloading = true
        await item.downloadReport()
        this.downloading = false
      },

      onDelete(item) {
        this.$dialog.confirm({
          text: "确定要删除该报告，注意删除不可撤销?",
          title: "警告",
          waitForResult: true,
          actions: {
            false: {
              text: "取消",
              color: "blue",
            },
            true: {
              text: "确定",
              color: "red",
              handle: () => {
                return item.delete().then(() => {
                  this.dataTrigger = !this.dataTrigger
                  return
                })
              },
            },
          },
        })
      },
    },
  }
</script>
